<template>
  <section class="todo-list">
    <header class="header">
      <h1>todos</h1>
      <!--   用于输入   -->
      <todo-input @submit="addTodo"/>
    </header>
    <section class="main">
      <div class="todo">
        <todo-item
          v-for="todo in filterTodos"
          :key="todo.id"
          v-bind="todo"
          @update:todo="updateTodo"
          @delete:todo="deleteTodo"
        />
      </div>
    </section>
    <todo-footer>
      <span class="todo-count"> 有<strong>2</strong>项未完成 </span>

      <div class="filters">
        <filter-link v-for="item in ['全部', '已完成', '未完成']" :key="item" :active="currentFilter === item"
          @click="changeFilter(item)">{{item}}</filter-link>
      </div>

      <button class="clear-completed">清除已完成</button>
    </todo-footer>
  </section>
</template>

<script>
import TodoInput from "./TodoInput.vue";
import TodoItem from "./TodoItem.vue";
import TodoFooter from "./TodoFooter.vue";
import FilterLink from "./FilterLink";
import {  createNamespacedHelpers } from "vuex";
import { UPDATE_TODO, DELETE_TODO , ADD_TODO, CHANGE_FILTER} from "../store/types";
const {mapGetters, mapState, mapMutations} = createNamespacedHelpers('todo')
export default {
  name: "TodoList",
  components: { TodoInput, TodoItem, TodoFooter, FilterLink },
  computed: {
    ...mapState(["currentFilter"]),
    // ...mapState({"currentFilter": state => state.todo.currentFilter}),
    ...mapGetters(["filterTodos"])
  },
  methods: {
    ...mapMutations({ updateTodo: UPDATE_TODO, deleteTodo: DELETE_TODO, addTodo:ADD_TODO, changeFilter: CHANGE_FILTER}),
  },
  created() {
    console.log(this.$store.state.todo.currentFilter)
  }
};
</script>

<style lang="scss" scoped>
.todo-list {
  background: #fff;
  margin: 130px 0 40px 0;
  position: relative;
  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2), 0 25px 50px 0 rgba(0, 0, 0, 0.1);
}

h1 {
  position: absolute;
  top: -155px;
  width: 100%;
  font-size: 100px;
  font-weight: 100;
  text-align: center;
  color: rgba(175, 47, 47, 0.15);
  -webkit-text-rendering: optimizeLegibility;
  -moz-text-rendering: optimizeLegibility;
  text-rendering: optimizeLegibility;
}

.filters {
  margin: 0;
  padding: 0;
  list-style: none;
  position: absolute;
  right: 0;
  left: 0;
}
</style>
